<template>
  <!-- 自适应布局，中间部分高度自适应，橙色宽度220px，蓝色宽度自适应，黑色宽度150px； -->
  <div class="container">
    <header class="heade" />
    <div class="con">
      <div class="left" />
      <div class="main">
        <div class="main1" />
      </div>
      <div
        class="right"
        @click="setImage()"
      >
        右侧
      </div>
      <div id="newImg">
        hjkhcsfkghasflghfsghfsghfdkjghfshfs
      </div>
    </div>
    <footer class="foot" />
  </div>
</template>

<script>
import html2Canvas from 'html2canvas'
export default {
  data() {
    return {
      minText: '21121'
    }
  },
  methods: {
    /**
     * @description: 描述
     * @return {*}
     * @author: lcw
     */
    dataArr() {
      // const min = 12121
      // console.warn(min)
    },
    setImage() {
      var that = this
      var opts = { useCORS: true }
      html2Canvas(document.getElementById('newImg'), opts).then(function(canvas) {
        var imgUri = canvas.toDataURL('image/jpeg', 2) // 获取生成的图片的url
        window.open(imgUri)
        console.warn(imgUri, 'imgUri----')
        that.testsrn = imgUri
        that.centerDialogVisible = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .heade {
    flex-shrink: 0;
    width: 100%;
    height: 56px;
    background-color: yellow;
  }
  .con {
    display: flex;
    flex: 1;
    .left {
      width: 220px;
      background-color: red;
    }
    .main {
      flex: 1;
      position: relative;
      background-color: blue;
      .main1 {
        position: absolute;
        overflow: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
    .right {
      width: 220px;
      background-color: green;
    }
  }

  .foot {
    flex-shrink: 0;
    width: 100%;
    height: 120px;
    background-color: #aaa;
  }
}
</style>
